{extend name="app/admin/view/base.html"/}

{block name="resources"}
<style type="text/css">
	.access{padding: 10px;}
	.access-title {font-size: 18px;font-family: Microsoft YaHei;font-weight: 400;color: #333333;}
	.access-item{background-color: #F8F8F8;display: flex;flex-direction: column;justify-content: space-between;}
	.item {display: flex;justify-content: space-between;margin: 20px 0 20px 10px;}
	.item-datail {position: relative;}
	.item-number {width: 30px;height: 30px;border-radius: 50%;border: 5px solid #eee;position: absolute;top: -5px;left: -45px;box-sizing: border-box;font-size: 10px;line-height: 20px;}
	.item-number label{width: 20px;height: 20px;background: #ddd;border-radius: 50%; text-align: center;color: #FFFFFF !important;display: inline-block;font-size: 12px;}
	.item-number.active {border: 5px solid rgba(255, 106, 0, 0.5);}
	.item-number.active label {background: #FF6A00;}
	.item-check{position: absolute;top: 5px; left: 20px;width: 25px;height: 25px;background: #CCCCCC;border-radius: 50%;display: flex;align-items: center;justify-content: center;}
	.item-check i{border-radius: 50%;border: none;font-size: 14px;color: #fff}
	.item-checked{background: rgba(255,106,0,0.5);border-radius: 50%;}
	.item-checked i {color: #ff6a00}
	.item-datail div {font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #333333;margin-bottom: 10px;}
	.item-datail p {display: inline-block; font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #999999;}
	.item-datail a {font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;color: #FF6A00!important;}
	.item button {width: 88px;height: 34px;background: #FF6A00;border-radius: 2px;border: 1px solid #FFFFFF;font-weight: 400;color: #FFFFFF;cursor: pointer;}
	.item span {margin-right: 40px;margin-top: 10px;}
	.layui-timeline-item:before{top: 27px;}
</style>
{/block}

{block name="main"}
<div class="access">
    <div class="access-title">微信视频号</div>
    <ul class="layui-timeline">
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <div class="item">
                    <div class="item-datail">
                        <div class="item-number active">
                            <label>1</label>
                        </div>
                        <div class="">创建微信视频号</div>
                        <p>在微信中创建视频号，如已有视频号可越过该步骤。</p>
                    </div>
                    <a href="https://jingyan.baidu.com/article/a3f121e412dc13bd9052bb87.html" target="_blank"><button type="button">开通教程</button></a>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <div class="item">
                    <div class="item-datail">
                        <div class="item-number {if $checkres['code'] == 0 && $checkres['data']['status'] == 2}active{/if}">
                            <label>2</label>
                        </div>
                        <div class="">申请开通自定义版交易组件</div>
                        <p>完成自定义版交易组件接入后，小程序即可在视频号中实现商品展示和带货等功能，进一步提升经营能力。若您已开通标准化交易组件，则暂不支持切换</p>
                    </div>
                    {if $checkres['code'] == 0}
                        {if $checkres['data']['status'] != 2 && $checkres['data']['status'] != 3}
                        <button type="button" onclick="apply()">立即开通</button>
                        {/if}
                    {else/}
                        <button type="button" onclick="apply()">立即开通</button>
                    {/if}
                </div>
                <div class="access-item">
                    <div class="item">
                        <div class="item-datail">
                            <div class="item-check {if $checkres['code'] == 0 && $checkres['data']['status'] == 2}item-checked{/if}">
                                <i class="iconfont iconduihao"></i>
                            </div>
                            <div class="" style="margin-left: 60px;">
                                <label>完成自定义版交易组件开通申请</label>
                                <br>
                                <p>官方审核团队将对接入资质进行审核，通过后可进行下一步操作。</p>
                            </div>
                        </div>
                        {if $checkres['code'] == 0}
                    		{if $checkres['data']['status'] == 2}
                        	<span>已开通</span>
                        	{elseif $checkres['data']['status'] == 3}
                        	<span>封禁中</span>
                        	{else/}
                        	<span>未开通</span>
                        	{/if}
                        {else/}
                            <span>未开通</span>
                        {/if}
                    </div>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <div class="item">
                    <div class="item-datail">
                        <div class="item-number {if $checkres['code'] == 0 && $checkres['data']['status'] == 2}active{/if}">
                            <label>3</label>
                        </div>
                        <div class="">自定义版交易组件申请通过，接口调用场景检测</div>
                 		<p>自定义交易组件开通之后，如果当前小程序版本低于4.1.5，则需下载4.1.5或更高版本小程序进行发布，<a href="{:addon_url('weapp://admin/weapp/package')}" target="_blank">前去发布</a></p>
                    </div>
                </div>
                <div class="access-item">
                    <div class="item">
                        <div class="item-datail">
                         	<div class="item-check {if $checkres['code'] == 0 && $checkres['data']['status'] == 2 && $checkres['data']['access_info']['spu_audit_success'] eq 1}item-checked{/if}">
                                <i class="iconfont iconduihao"></i>
                            </div>
                            <div style="margin-left: 60px;">
                                <label>商品接口调用</label>
                                <br>
                                <p>请至少将一件商品同步到微信，并等待商品审核通过<a href="{:addon_url('shopcomponent://admin/goods/lists')}">前去添加</a>
                                </p>
                            </div>
                        </div>
                        {if $checkres['code'] == 0 && $checkres['data']['status'] == 2 && $checkres['data']['access_info']['spu_audit_success'] eq 1}
                        <span>已完成</span>
                        {else/}
                        <span>未完成</span>
                        {/if}
                    </div>
                    <div class="item" style="margin-top: 0;">
                        <div class="item-datail">
                            <div class="item-check {if $checkres['code'] == 0 && $checkres['data']['status'] == 2 && $checkres['data']['access_info']['pay_order_success'] eq 1}item-checked{/if}">
                                <i class="iconfont iconduihao"></i>
                            </div>
                            <div style="margin-left: 60px;">
                                <label>订单接口调用</label>
                                <br>
                                <p>请通过视频号进入小程序生成一笔订单并付款成功</p>
                            </div>
                        </div>
                     	{if $checkres['code'] == 0 && $checkres['data']['status'] == 2 && $checkres['data']['access_info']['pay_order_success'] eq 1}
                        <span>已完成</span>
                        {else/}
                        <span>未完成</span>
                        {/if}
                    </div>
                </div>
            </div>
        </li>
        <li class="layui-timeline-item">
            <div class="layui-timeline-content layui-text">
                <div class="item">
                    <div class="item-datail">
                        <div class="item-number {if $checkres['code'] == 0 && $checkres['data']['status'] == 2 && $checkres['data']['access_info']['spu_audit_success'] eq 1 && $checkres['data']['access_info']['pay_order_success'] eq 1}active{/if}">
                            <label>4</label>
                        </div>
                        <div class="">自定义版交易组件开通成功</div>
                 		<p>开通成功之后可在小程序中“功能>交易组件>场景接入”中，添加视频号推广员，添加成功后，推广员可前往“视频号个人主页>右上角菜单>我的商店”中关联小程序、推广商品，<a href="https://mp.weixin.qq.com" target="_blank">前去添加</a>。 </p>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
	function apply(){
		$.ajax({
            url: ns.url("shopcomponent://admin/goods/access"),
            dataType: 'JSON',
            type: 'POST',
            success: function(res) {
                if (res.code == 0) {
                    layer.msg('开通成功');
                    setTimeout(function () {
                        location.reload();
                    }, 1000)
                } else {
                    layer.msg(res.message);
                }
            }
        });
	}
</script>
{/block}